//4.修改数量值
//5.删除操作
import {} from 'https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js'; //引入jquery类库

function cartlist() {
    //1.渲染商品列表
    //获取本地存储的数量和编号sid，通过编号sid获取数据。
    if (localStorage.getItem('localsid') && localStorage.getItem('localnum')) {
        let sidarr = localStorage.getItem('localsid').split(','); //1,2,3,4,5  通过编号sid获取数据,填充数据
        let numarr = localStorage.getItem('localnum').split(','); //10,20,30,40,50 商品的数量

        for (let i = 0; i < sidarr.length; i++) {
            renderCart(sidarr[i], numarr[i]);
        }

    }
    //渲染封装一个商品
    //http://10.31.157.31/JS2101/projectname/php/alldata.php
    function renderCart(sid, num) { //sid:商品的编号   num:商品的数量
        $.ajax({
            url: 'http://10.31.157.31/JS2101/projectname/php/alldata.php',
            dataType: 'json'
        }).done(function(data) {
            $.each(data, function(index, value) {
                if (sid == value.sid) { //如果传入sid和数据接口里面的sid相同，拿到这条数据，进行渲染。
                    //:hidden匹配所有不可见元素，或者type为hidden的元素
                    //clone(true,true) 克隆匹配的DOM元素并且选中这些克隆的副本,true表示克隆元素的事件和子元素。
                    //append(content|fn)向每个匹配的元素内部追加内容
                    let clonebox = $('.goods-item:hidden').clone(true, true); //克隆元素
                    clonebox.find('.goods-pic img').attr('src', value.picurl);
                    clonebox.find('.goods-d-info a').html(value.title);
                    clonebox.find('.b-price strong').html(value.price);
                    clonebox.find('.quantity-form input').val(num);
                    clonebox.find('.b-sum strong').html((value.price * num).toFixed(2)); //保留2位小数
                    $('.item-list').append(clonebox); //追加元素
                    clonebox.css('display', 'block'); //显示克隆的元素
                    calc(); //计算总价和总的件数
                }
            })
        })
    }



    //2.总件数和总价
    //input复选框选中的时候，才计算总的数量和价格
    function calc() {
        let allprice = 0; //总价
        let allgoods = 0; //总的件数
        //:visible匹配所有的可见元素
        $('.goods-item:visible').each(function(index, element) { //element:原生的元素
            //判断input复选框是否选中
            if ($(element).find('input:checkbox').is(':checked')) { //is(表达式):如果其中至少有一个元素符合这个给定的表达式就返回true
                allprice += parseFloat($(element).find('.b-sum strong').html());
                allgoods += parseFloat($(element).find('.quantity-form input').val());
            }

        });
        $('.amount-sum em').html(allgoods);
        $('.totalprice').html('￥' + allprice);
    }

    //3.全选
    $('.allsel').on('click', function() {
        $('.goods-item:visible').find('input:checkbox').prop('checked', $(this).prop('checked'));
        $('.allsel').prop('checked', $(this).prop('checked'));
        calc();
    });

    $('.item-list').on('click', 'input:checkbox', function() {
        if ($('.goods-item:visible').find('input:checkbox').length === $('.goods-item:visible').find('input:checked').length) {
            $('.allsel').prop('checked', true);
        } else {
            $('.allsel').prop('checked', false);
        }
        calc();
    });

}



export {
    cartlist
}